<template>
	<!--关于-->
	<view class="about-box" :class="showAbout === 0 ? 'none' : showAbout === 1 ? 'show' : ''">
		<view class="about-content">
			<view class="item-fixed-top">
				<view class="title">关于</view>
				<view class="close" @click="closeAbout">
					<image src="../../static/images/close.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="a-item">
				<view class="item-box">
					<view class="item-img">
						<image src="../../static/images/logo.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item-r">艾蜜云科技有限公司</view>
			</view>
			<view class="c-txt">Copyright © 2015 - {{year}} 艾蜜云科技 CO.,Ltd</view>
		</view>
	</view>
</template>

<script>
	export default {
	  	data() {
			return {
				showAbout : 0,
				year:new Date().getFullYear(),
			};
		},
		
		methods: {
			/***显示about***/
			toggleAboutStateMask(type)
			{	
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.showAbout = 2;
				setTimeout(() => {
					this.showAbout = state;
				}, timer);
			},
			
			/***关闭about***/
			closeAbout()
			{
				this.toggleAboutStateMask();
			},
		}
	}
</script>
<style lang="scss">
	.about-box {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.about-content {
			border-radius: 6px;
			overflow: hidden;
			width: 30%;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			.item-fixed-top
			{
				padding: 10px 0 10px 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFF;
				font-size: 18px;
				.close
				{
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.about-content {
				transform: translateY(0);
			}
		}
	}
	.a-item{
		margin: 2px 0;
		// width: 100%;
		background: #FFF;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px 20px 10px 10px;
		border-bottom: 1px solid #ECECEC;
		.item-box
		{
			// padding: 0;
			//padding-left: calc(50% - 60px);
			width: 100%;
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			padding-top: 20px;
			.item-img
			{
				width: 70px;
				height: 70px;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.item-r
		{
		    width: 100%;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
			view
			{
				font-size: 12px;
				line-height: 18px;
				color: #999;
			}
		}
	}
	
	.c-txt
	{
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	
</style>